<template>
  <view>
    <view class="data_analyze">
      <view class="analyze">
        <view class="filter">
          <view @click="checkDate('all')" :class="date_filter=='all'?'active':''">全部</view>
          <view @click="checkDate('today')" :class="date_filter=='today'?'active':''">今日</view>
          <view @click="checkDate('yesterday')" :class="date_filter=='yesterday'?'active':''">昨日</view>
          <view @click="checkDate('week')" :class="date_filter=='week'?'active':''">近一周</view>
        </view>
        <view class="data">
          <view class="item">
            <view>访客数</view>
            <text>{{views}}</text>
          </view>
          <view class="item">
            <view>订单数</view>
            <text>{{total}}</text>
          </view>
          <view class="item">
            <view>成交额</view>
            <text>{{subtotal_price}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class='head'>
      <view class='tab-view'>
        <view v-for="(item,index) in tab_view" @click="onTab(item)">
          <view :class="current_status == item.status?'cur':''">{{item.title}}</view>
        </view>
      </view>
    </view>

    <view class='order-list' v-if='lists.length>0'>
      <view class='order-item' v-for="(item,index) in lists">
        <view class='order-item-shop'>
          <view>
            <view class='item-shop-icon yz_family yz-mendian'></view>
            <view class='item-shop-name'>￥{{item.total_fee}}</view>
          </view>
          <view class='cur order-item-status'>
            {{item.status_text}}
          </view>
        </view>
        <view class='order-item-good' v-for="(val,idx) in item.item" @click="$xyfun.to('/pages/user/shop/order_detail?id='+item.id)">
          <view class='info'>
            <view class="file">
              <image :src="$xyfun.image(val.goods_image)"></image>
            </view>
            <view class='order-item-good-info'>
              <view class='order-item-good-name'>{{val.goods_title}}</view>
              <view class='order-item-good-tips'>
                <view class='order-item-good-attr'>{{val.goods_sku_text}}x{{val.buy_num}}</view>
              </view>
            </view>
            <view class="order-item-sub">
              <view class='order-item-total'></view>
              <view class='order-item-good-price'>{{val.goods_price}}</view>
            </view>
          </view>
        </view>
        <view class='order-item-operation'>
          <view class="order-item-create">{{$xyfun.timeFormat(item.createtime,'yyyy-mm-dd')}}</view>
          <view class="border-cur" v-if="item.status==1" @click="take_order(item)">发货</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import xyEmpty from "@/components/xy-empty/index.vue";
export default {
  components: {
    xyEmpty
  },
  data() {
    return {
      isLoading: true,
      //预约配送到家
      tab_view: [{
        title: '全部',
        status: 'all'
      }, {
        title: '待发货',
        status: '1'
      }, {
        title: '待收货',
        status: '2'
      }, {
        title: '已完成',
        status: '3'
      }],
      //选项卡当前选中
      current_status: 'all',

      //today=今天,yesterday=昨天,week=周,custom=自定义
      date_filter : 'all',

      lists: [],
      currentPage: 1,
      lastPage: 1,

      subtotal_price : '0.00',
      views: 0,
      total: 0,//订单数

      money_show : true

    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad() {
    this.loadData();
  },
  methods:{
    loadData(){

      this.$api.post({
        url: '/store/order_list',
        loadingTip:'加载中...',
        data: {
          date_filter : this.date_filter,
          status : this.current_status,
          page: this.currentPage,
          store_id: uni.getStorageSync('store_id')
        },
        success: res => {
          let orderData = res.data;
          this.lists = [...this.lists, ...orderData.data];
          this.currentPage = orderData.current_page;
          this.lastPage = orderData.last_page;
          this.isLoading = false;

          this.total = res.order_count;
          this.subtotal_price = res.order_capital;
        }
      });
    },
    checkDate(type){
      this.date_filter = type;
      this.currentPage = 1;
      this.lastPage = 1;
      this.lists = [];
      this.loadData();
    },
    onTab(item){
      this.current_status = item.status;
      this.currentPage = 1;
      this.lastPage = 1;
      this.lists = [];
      this.loadData();
    },
    //订单发货
    take_order(item){
      this.$api.post({
        url: '/store/take_order',
        loadingTip:'加载中...',
        data: {
          id: item.id,
        },
        success: res => {
          this.currentPage = 1;
          this.lastPage = 1;
          this.lists = [];
          this.loadData();
        }
      });
    }
  }
}
</script>

<style lang="scss">

page{
  background: #f5f5f5;
}


.data_analyze{
  margin: 20rpx;
  .analyze{
    background: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
  }
  .analyze .filter{
    display: flex;
  }
  .analyze .filter view{
    margin-right: 20rpx;
    background: #fff;
    color: #8d8d8d;
    border: 1rpx #d9d9d9 solid;
    line-height: 50rpx;
    height: 50rpx;
    text-align: center;
    font-size: 24rpx;
    width: 120rpx;
    border-radius: 22rpx;
  }
  .analyze .filter .active{
    border: 1rpx $theme2 solid;
    background: $theme2;
    color: #fff;
  }
  .data{
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;
  }
  .data .item{
    width: 33.3%;
    text-align: center;
  }
  .data .item view{
    font-size: 20rpx;
    margin-bottom: 10rpx;
  }
  .data .item text{
    font-size: 40rpx;
    font-weight: bold;
  }
}


.tab-view {
  display: flex;
  width: 100%;
  overflow: hidden;
  height: 80rpx;
}

.tab-view > view {
  flex: 1;
  width: 20%;
  text-align: center;
  line-height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-view > view view {
  font-size: 28rpx;
  position: relative;
}

.tab-view .cur {
  color: $theme1;
}
.tab-view .cur:after{
  content: '';
  display: block;
  width: 26rpx;
  height: 4rpx;
  background: $theme1;
  margin: 0 auto;
}

.head {
  width: 100%;
}

.order-list {
}


.order-item .order-item-good .file {
  width: 150rpx;
  font-size: 24rpx;
  text-align: center;
  background-size: 150rpx 150rpx;
  background-repeat: no-repeat;
}

.order-item .order-item-good .file image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
}

.order-item .order-item-good .info {
  flex-grow: 1;
  margin-left: 24rpx;
  display: flex;
  justify-content: space-between;
}

.order-item {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding-bottom: 20rpx;
}

.order-item .order-item-shop {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
}

.order-item .order-item-shop > view {
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-item .order-item-shop .item-shop-icon {
  font-size: 34rpx;
}

.order-item .order-item-shop .item-shop-name {
  font-size: 28rpx;
  font-weight: bold;
  line-height: 60rpx;
  margin-left: 16rpx;
}


.order-item .order-item-shop .order-item-status {
  font-size: 26rpx;
}

.order-item .order-item-good {
  overflow: hidden;
  padding: 0 20rpx 0 20rpx;
  display: flex;
  margin-bottom: 20rpx;
}

.order-item .order-item-good > image {
  width: 150rpx;
  height: 150rpx;
  float: left;
}

.order-item .order-item-good > view {
  float: left;
}

.order-item  .order-item-good-info {
  width: 360rpx;
}

.order-item-good-name {
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.order-item-good-tips {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 24rpx;
  color: #8d8d8d;
  margin-top: 10rpx;
}

.order-item-good-status {
  font-size: 26rpx;
  text-align: right;
  color: #e8b340;
}

.order-item-sub{
  text-align: right;
}

.order-item-good-price {
  font-size: 26rpx;
  font-weight: bold;
}
.order-item-total {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #8d8d8d;
}


.order-item-operation {
  width: 100%;
  height: 40rpx;
  text-align: right;
}
.order-item-operation > view {
  width: 150rpx;
  font-size: 24rpx;
  line-height: 40rpx;
  border: 1rpx solid $theme1;
  background: #fff;
  color: $theme1;
  border-radius: 30rpx;
  text-align: center;
  margin: 0 24rpx 0 0;
  display: inline-block;
}
.order-item-operation .order-item-create{
  float: left;
  line-height: 50rpx;
  font-size: 20rpx;
  background: unset;
  margin-left: 20rpx;
  color: #464646;
  border: none;
}
.order-item-operation .border-cur{

}

</style>
